<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';
.footer-menu{
	position: fixed;
	z-index: 800;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background-color: #fff;
	border-top: 1px solid #ddd;
	.flex-row-around;

	.each-menu{
		height: 100%;
		color: #000;
		.px2px(font-size, 24PX);
		.flex-column-center;

		.menu-tit{
			margin-top: 0;
		}

		&.active{
			color: #ff4c4c;

			.home-icon{
				background-image: url(../assets/images/icons/home-red.png);
			}

			// .search-icon{
			// 	width: 48px;
			// 	height: 48px;
			// 	background-image: url(../assets/images/icons/search-red.png);
			// }

			// .money-icon{
			// 	width: 44px;
			// 	height: 50px;
			// 	background-image: url(../assets/images/icons/money-red.png);
			// }

			.mine-icon{
				background-image: url(../assets/images/icons/mine-red.png);
			}
		}

		.home-icon{
			width: 48px;
			height: 48px;
			background-image: url(../assets/images/icons/home-gary.png);
		}

		// .search-icon{
		// 	width: 48px;
		// 	height: 48px;
		// 	background-image: url(../assets/images/icons/search-gray.png);
		// }

		// .money-icon{
		// 	width: 46px;
		// 	height: 49px;
		// 	background-image: url(../assets/images/icons/money-gary.png);
		// }

		.mine-icon{
			width: 48px;
			height: 49px;
			background-image: url(../assets/images/icons/mine-gary.png);
		}
	}
}
</style>
<template>
  <div class="footer-menu">
		<!-- 只有是代理用户才展示赚钱菜单 -->
		<!-- <div class="each-menu"  v-for="(item, index) of menuLst" :key="index" v-show="index !== 2 || isAgentUsr" :class="{active: index === chosIndex}" v-on:click="changeChos(item.name)"> 
			<i class="bw-ico" :class="item.iconName"></i>
			<span class="menu-tit">{{item.title}}</span>
		</div> -->
		<div class="each-menu" v-for="(item, index) of menuLst" :key="index" :class="{active: index === chosIndex}" v-on:click="changeChos(item.name)"> 
			<i class="bw-ico" :class="item.iconName"></i>
			<span class="menu-tit">{{item.title}}</span>
		</div>
  </div>
</template>

<script>
export default {
  props: {
    chosIndex: {
      default: 0
    },
    isAgentUsr: {
      default: false
    }
  },
  data: function() {
    return {
      menuLst: [{
        title: '首页',
        iconName: 'home-icon',
        name: 'index'
      }, {
        title: '我的',
        iconName: 'mine-icon',
        name: 'mine'
      }]
    }
  },
  methods: {
    changeChos(name) {
      // this.$emit('update:chosIndex', index)
      this.$router.push({ name: name })
    }
  },
  mounted() {
  }
}
</script>
